<template>
    <div class="CreateElementSection" @mousedown="operateDown" @mouseup="CreateOperate">

    </div>
</template>
<script setup>
import Operate from '../Operate/index.vue'
import { UseMainStore } from '@/stores/index';
import { storeToRefs } from 'pinia'
let MainStore = UseMainStore();
let { CreatingElement } = storeToRefs(UseMainStore())
function operateDown() {
    // 获取添加元素类型
}
function CreateOperate($event) {
    if (CreatingElement.value.position) {
        //清除
        MainStore.setIsOperating(false);
        MainStore.setCreatingElement(null)
        return false
    }
    // 获取鼠标松开的位置信息[x,y] pageX / clientX / screenX / offsetX
    let { pageX, pageY, offsetX, offsetY } = $event
    //  MainStore.setCurrElementPosition([pageX, pageY]);
    MainStore.setCreatingElement({ position: [offsetX, offsetY] })
    // 添加元素:元素类型-元素位置
    let { type, position } = CreatingElement.value
    MainStore.setElements({ type, position })


}
</script>
<style lang="scss" scoped>
.CreateElementSection {
    cursor: crosshair;
}
</style>